<html>
  <head>
    <link rel="stylesheet" type="text/css"
      href="http://code.google.com/css/dev_docs.css"> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
      .thumbnail { float: left; width: 10em; border: 1px solid #999;
                   margin: 3em 1em 1em 0em; padding: 5px;
                   text-align: center;}
      .thumbnail img { border: 1px solid #aaa; }
      .thumbnail p { margin:0em 0em 0em 0em; }
      .clearboth { clear: both; }
    </style>

    <title>Google Book Search API Demo:</title>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">

      function openBookByTitle(query)
      {
        showStatus('Searching for ' + query + '...');
        beginSearch(query);
      }
 
      function beginSearch(query)
      {
        var script = document.createElement("script");
        if( !isNaN( query ) )
        {
        query = "isbn:" + query;
        }
        script.src = 'http://books.google.com/books/feeds/volumes?q=' 
          + encodeURIComponent(query) + '&alt=json-in-script&callback=handleResults';
        script.type = "text/javascript";
        document.getElementsByTagName("head")[0].appendChild(script);
      }
 
      function handleResults(root)
      {
        showStatus('Search Results:');
        var div = document.getElementById("data");
        if (div.firstChild) div.removeChild(div.firstChild);
        var mainDiv = document.createElement("div");
        var feed = root.feed;
        var entries = feed.entry || [];
        if( entries.length == 0 )
        {
          showStatus('Could not find a match');
        }
        for (var i = 0; i < entries.length; ++i)
        {
          var entry = entries[i];
          var thumbnailDiv = document.createElement("div");
          thumbnailDiv.className = "thumbnail";
          var a = document.createElement("a");
          for (var j = 0; j < entry.link.length; ++j)
          { 
            if (entry.link[j].rel == 'http://schemas.google.com/books/2008/info')
            {
              a.href = entry.link[j].href;
            }
          }
          var inner = "Title: " + entry.dc$title[0].$t + "<br />Author: "  + entry.dc$creator[0].$t;
          a.innerHTML = inner;
          var img = document.createElement("img");
          for (var k = 0; k < entry.link.length; ++k)
          {
            if (entry.link[k].rel == 'http://schemas.google.com/books/2008/thumbnail')
            {
              img.src = entry.link[k].href; 
              img.width = "100";
              img.height = "150";
            }
          }
          a.appendChild(img);
          thumbnailDiv.appendChild(a);
          
          var embeddableValue = entry.gbs$embeddability.value;
          var isEmbeddable = (embeddableValue == 
            'http://schemas.google.com/books/2008#embeddable');
          if( isEmbeddable )
          {
            var a2 = document.createElement("a");
            for (var l = 0; l < entry.link.length; ++l)
            {
              if (entry.link[l].rel == 'http://schemas.google.com/books/2008/preview')
              {
                a2.href = entry.link[l].href; 
              }
            }
        		a2.innerHTML = "preview";
        		thumbnailDiv.appendChild(a2);
        	}
          mainDiv.appendChild(thumbnailDiv);
        }
        div.appendChild(mainDiv);
      }

      function showStatus(string)
      {
        var statusDiv = document.getElementById('viewerStatus');
        var showing = !(string == null || string.length == 0);
        statusDiv.innerHTML = (showing) ? string : '';
        statusDiv.style.display =  (showing) ? 'block' : 'none';
      }

    </script>
  </head>
  <body> 
    <div style="text-align: right"> 
        <a href="/user/register">Register</a> &nbsp;|&nbsp; <a href="/user/sign_in">Sign in</a> 
    </div> 
    <hr /> 
    <div style="text-align: center; padding-top: 3em;"> 
        <img src="images/Bookiki.gif" alt="Bookiki!" width="325" height="110" style="margin-bottom:0em;"/> 
        <form name="inputForm"
          onsubmit="openBookByTitle('计算机'); return false;"
          method="get"> 
            <!--<input maxlength="2048" type="text" name="query" size="55" title="Bookiki Search" value="Pride and Prejudice"/>-->
            <input type="submit" value="Go!"/> 
            <script type="text/javascript"> 
                document.all.query.focus();
            </script> 
            <br /> 
 
        </form>
        
        <div id="viewerStatus"
         style="padding: 5px; background-color: #eee; display: none"></div> 
        <script>openBookByTitle('Pride and Prejudice');</script> 
        <br/>
    </div>
    <div id="data" style="margin-left: 5em;"></div>
  </body>
</html>
